<template>
  <div class="op-container">
    <div class="filter-container">
      <span class="filter-title filter-item">身份所属</span>
      <k-select
        v-model="identityBelong"
        style="width:100px"
        class="filter-item right-item"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="handleFilter"
      />

      <span class="filter-title filter-item">限制状态</span>
      <k-select
        v-model="listQuery.limitStatus"
        style="width:120px"
        class="filter-item user-status"
        :select-params="[{label:'已限制',value: 1}, {label:'已取消',value: 2}]"
        @handleSelectEvent="handleFilter"
      />

      <span class="filter-title filter-item">添加时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="handleFilter" />
      <span class="filter-title filter-item">限制时间</span>
      <k-date-picker v-model="timeValueGet" class="filter-item" @hqchang="handleFilter" />

      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="请输入关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />

    </div>
    <!-- openBoxProbSetting -->
    <k-button v-if="authorityHandle(181)" class="top-btn" value="添加用户" @click.native="openBoxProbSetting" />
    <div v-if="!authorityHandle(181)" style="margin-top: 40px;" />
    <!--表格相关 -->
    <el-table
      :data="listData"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column prop="userNickName" min-width="120px" label="昵称" align="center" />
      <el-table-column prop="userMobile" min-width="120px" label="绑定手机号" align="center" />
      <el-table-column prop="userTypeName" min-width="130px" label="身份所属" show-overflow-tooltip align="center" />

      <el-table-column prop="rechargeTotal" min-width="100px" label="消费总额" align="center">
        <template slot-scope="scope">
          <p class="kol-router">{{ scope.row.rechargeTotal }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="drawTotal" min-width="100px" label="提取总额" show-overflow-tooltip align="center" />
      <el-table-column prop="accountBalance" min-width="100px" label="账户余额(F)" show-overflow-tooltip align="center" />
      <el-table-column prop="createTime" min-width="100px" label="添加时间" show-overflow-tooltip align="center" />
      <el-table-column prop="limitTime" min-width="100px" label="限制时间" show-overflow-tooltip align="center" />

      <el-table-column prop="limitStatus" min-width="100px" label="限制状态" align="center">
        <template slot-scope="scope">
          <p class="kol-router">{{ scope.row.limitStatus == 1 ? '已限制' : '已取消' }}</p>
        </template>
      </el-table-column>

      <el-table-column v-if="authorityHandle(181)" prop="limitDes" min-width="120px" label="限制原因" align="center">
        <editable-cell
          v-model="row.limitDes"
          slot-scope="{row}"
          :tool-tip-content="row.limitDes ? row.limitDes : '点击编辑,编辑完成回车'"
          :show-input="row.editMode"
          @blur="blurInput(row)"
          @keyup.enter.native="$event.target.blur()"
        >
          <span
            slot="content"
            style="
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	"
          >{{ row.limitDes }}</span>
        </editable-cell>
      </el-table-column>

      <el-table-column v-else prop="limitDes" min-width="120px" label="备注" align="center" />

      <el-table-column v-if="authorityHandle(181)" fixed="right" min-width="100px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              v-show="scope.row.limitCount == 1 && scope.row.limitStatus == 1"
              class="table-btn"
              value="取消限制"
              @click.native="updateUserStatus(scope.row)"
            />
            <k-button
              v-show="scope.row.limitCount == 1 && scope.row.limitStatus == 2"
              class="table-btn"
              value="再次限制"
              @click.native="updateUserStatus(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

    <!-- 添加用户 弹窗 -->
    <k-dialog
      :show-hide.sync="openboxsetting.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加用户"
      class-name="openboxsetting-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="probability"
    >
      <div class="dialog-openboxsetting">
        <el-form label-width="auto">
          <el-form-item label="添加用户">
            <el-select
              v-model="probilityModle"
              filterable
              remote
              reserve-keyword
              placeholder="请选择用户"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option v-for="item in UserList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
            </el-select>
          </el-form-item>
          <el-form-item label="限制原因">
            <el-input v-model="limitDes" type="textarea" :rows="5" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import {
  getByIdentityBelong
} from '@/api/user/user'

import {
  limitList,
  limitUser,
  saveUser,
  updateLimitStatus,
  updateDes
} from '@/api/user/user'

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import EditableCell from '@/components/EditableCell'

export default {
  components: {
    Pagination,
    EditableCell
  },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      listData: [],

      invitationCodeList: [],
      totalRows: 0, // 分页组件--数据总条数

      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        identityBelong: undefined, // 身份所属",
        limitStatus: '', // 限制状态
        userIdStatus: undefined, // 在线状态",
        startCreateTime: '', // 添加 开始时间",
        endCreateTime: '', // 添加 结束时间",
        startLimitTime: '', // 限制 开始时间",
        endLimitTime: '', // 限制 结束时间",
        key: '' // 饰品名称'
      },

      UserList: [],
      loading: false,
      probilityModle: undefined,

      timeValue: '',
      timeValueGet: '',
      identityBelong: '',
      openboxsetting: {
        showHide: false
      },

      limitDes: ''

    }
  },
  watch: {
    identityBelong(val) {
      this.$log(val)
      this.listQuery.identityBelong = this.identityBelong
      if (val) {
        this.getByIdentityBelong(val)
      }
    },
    // 时间赋值
    timeValue(val) {
      this.listQuery.startCreateTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endCreateTime = this.timeValue ? this.timeValue[1] : null
    },
    timeValueGet(val) {
      this.listQuery.startLimitTime = this.timeValueGet ? this.timeValueGet[0] : null
      this.listQuery.endLimitTime = this.timeValueGet ? this.timeValueGet[1] : null
    }
  },
  created() {
    // if (this.authorityHandle(9, 10, 11, false)) {
    // 	this.typeList = [{
    // 		label: '主播',
    // 		value: 2
    // 	}]
    // }
    this.loadData()
  },

  methods: {
    blurInput(row) {
      this.modifyItemNote(row)
    },
    // 修改备注
    modifyItemNote(row) {
      updateDes({
        userId: row.userId,
        limitDes: row.limitDes
      }).then(res => {
        if (res.data.success) {
          this.$message.success('修改成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    loadData() {
      limitList(this.listQuery).then(res => {
        const data = res.data
        // this.listData = data.rows
        this.totalRows = data.totalRows
        if (data.rows) {
          this.listData = data.rows.map(row => {
            return {
              ...row,
              editMode: false
            }
          })
        } else {
          this.listData = []
        }
      })
    },

    // 保存用户
    probability() {
      if (!this.probilityModle) {
        this.$message.error('用户不可为空')
        return
      }
      saveUser({ userId: this.probilityModle, limitDes: this.limitDes }).then(res => {
        if (res.data.success) {
          this.$message.success('保存成功')
          this.openboxsetting.showHide = false
          this.loadData()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    // 查询身份所属
    getByIdentityBelong(id) {
      getByIdentityBelong({
        'identityBelong': id
      }).then(res => {
        this.$log(res)
        if (res.data.data) {
          this.invitationCodeList = res.data.data
        }
      })
    },

    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    },
    openBoxProbSetting() {
      this.openboxsetting.showHide = true
      // saveUser
    },

    remoteMethod(query) {
      if (query.trim().length == 11) {
        this.loading = true
        limitUser({ key: query }).then(res => {
          this.UserList = res.data
          this.loading = false
        })
      } else {
        this.UserList = []
      }
    },

    updateUserStatus(row) {
      updateLimitStatus({ userId: row.userId }).then(res => {
        if (res.data.success) {
          this.$message.success('修改成功')
          this.loadData()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
$menuText: #14162E; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.op-container {
  margin: 20px;
}

.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .right-item {
    margin-right: 10px;
  }

  .kInput {
    position: absolute;
    right: 10px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 6px;
    color: #14162E;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.top-btn {
  margin: 30px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
}

.balance_btn {
  margin: 0px 10px;
  font-size: 14px;
  color: #ffffff;
}

.account_balance {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.top-radio-group {
  margin-bottom: 40px;
  transform: translateY(-20px);
}

::v-deep .el-radio-button__inner {
  &:hover {
    color: $mainColor;
  }
}

.supervise-container {
  min-width: 960px;
  min-height: 300px;

  .percentage_box {
    width: 100%;
    height: 100%;
    overflow: hidden;

    p {
      text-align: center;
      font-size: 16px;
      margin-top: 40px;
    }

    .el-input {
      width: 80px;
      margin: 0 6px;
    }
  }

  .allocation_box {
    width: 100%;
    text-align: center;

    .allocation_main {
      display: inline-block;

    }

    li {
      list-style: none;
      display: block;
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .allocation_item {
        margin-right: 30px;

        ::v-deep input::-webkit-outer-spin-button,
        ::v-deep input::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }

        ::v-deep input[type="number"] {
          -moz-appearance: textfield;
        }
      }

      .el-input {
        width: 80px;
        margin: 0 6px;
      }

      .el-select {
        width: 124px;
        margin-left: 6px;
      }

      .el-icon {

        &-circle-plus,
        &-remove {
          font-size: 22px;
          color: #3b425d;
          margin-left: 10px;
        }
      }
    }
  }
}

.kSelect .el-select .el-input .el-input__inner {
  width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}

::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}

.el-form-item__label-wrap .el-form-item__label {
  float: none;
}

.dialog-openboxsetting {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 80px 80px;
}

.form-modify {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 80px;

  .modify-right {
    margin-left: 80px;
  }
}

.dialog-warningSetting {
  ::v-deep.el-input {
    width: 150px;
  }

  .price-input {
    width: 110px;
  }

  .el-icon {

    &-circle-plus,
    &-remove {
      font-size: 22px;
      color: #3b425d;
      margin-left: 10px;
    }
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      margin: 0 0 30px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .warning-title {
        font-size: 16px;
        color: $menuText;
        margin-right: 10px;
        margin-left: 20px;
      }

      i {
        color: #D1D5DD;
      }
    }
  }
}

.kol-router {
  color: #3b425d;
  font-size: 14px;
}

.avatardiv {
  width: 50px;
  height: 50px;
  position: relative;

  .image1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
  }

  .image2 {
    z-index: 10;
  }
}
</style>
